<template>
  <el-container class="app-container">
    <el-header class="app-header" height="56px">
      <div class="brand">
        <svg class="brand__logo" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path
            fill-rule="evenodd"
            clip-rule="evenodd"
            d="M24 18.4228L42 11.475V34.3663C42 34.7796 41.7457 35.1504 41.3601 35.2992L24 42V18.4228Z"
            fill="currentColor"
          />
          <path
            fill-rule="evenodd"
            clip-rule="evenodd"
            d="M24 8.18819L33.4123 11.574L24 15.2071L14.5877 11.574L24 8.18819ZM9 15.8487L21 20.4805V37.6263L9 32.9945V15.8487ZM27 37.6263V20.4805L39 15.8487V32.9945L27 37.6263ZM25.354 2.29885C24.4788 1.98402 23.5212 1.98402 22.646 2.29885L4.98454 8.65208C3.7939 9.08038 3 10.2097 3 11.475V34.3663C3 36.0196 4.01719 37.5026 5.55962 38.098L22.9197 44.7987C23.6149 45.0671 24.3851 45.0671 25.0803 44.7987L42.4404 38.098C43.9828 37.5026 45 36.0196 45 34.3663V11.475C45 10.2097 44.2061 9.08038 43.0155 8.65208L25.354 2.29885Z"
            fill="currentColor"
          />
        </svg>
        <h1 class="brand__name">easy-rich-text</h1>
      </div>
      <div class="nav">
        <a class="nav__link" href="#">文档</a>
        <a class="nav__link" href="#">模板</a>
        <a class="nav__link" href="#">AI 工具</a>
        <a class="nav__link" href="#">帮助</a>
      </div>
      <div class="actions">
        <button class="bell-btn" aria-label="notifications">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="20"
            height="20"
            fill="currentColor"
            viewBox="0 0 256 256"
          >
            <path
              d="M221.8,175.94C216.25,166.38,208,139.33,208,104a80,80,0,1,0-160,0c0,35.34-8.26,62.38-13.81,71.94A16,16,0,0,0,48,200H88.81a40,40,0,0,0,78.38,0H208a16,16,0,0,0,13.8-24.06ZM128,216a24,24,0,0,1-22.62-16h45.24A24,24,0,0,1,128,216ZM48,184c7.7-13.24,16-43.92,16-80a64,64,0,1,1,128,0c0,36.05,8.28,66.73,16,80Z"
            />
          </svg>
        </button>
        <el-avatar size="small" src="https://avatars.githubusercontent.com/u/0?v=4" />
      </div>
    </el-header>
    <el-main>
      <div class="page">
        <div class="layout-toc">
          <TocTree
            :nodes="nodes"
            :active-id="activeId || undefined"
            @navigate="onNavigate"
            @insertCardUnder="onInsertCardUnder"
          />
        </div>
        <div class="layout-content-container">
          <Editor ref="editorRef" @input="onEditorInput" />
        </div>
        <div class="layout-tools">
          <h2 class="tools__title">工具栏</h2>
          <div class="tool-item" tabindex="0">
            <div class="tool-item__icon">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                fill="currentColor"
                viewBox="0 0 256 256"
              >
                <path
                  d="M176,232a8,8,0,0,1-8,8H88a8,8,0,0,1,0-16h80A8,8,0,0,1,176,232Zm40-128a87.55,87.55,0,0,1-33.64,69.21A16.24,16.24,0,0,0,176,186v6a16,16,0,0,1-16,16H96a16,16,0,0,1-16-16v-6a16,16,0,0,0-6.23-12.66A87.59,87.59,0,0,1,40,104.49C39.74,56.83,78.26,17.14,125.88,16A88,88,0,0,1,216,104Zm-16,0a72,72,0,0,0-73.74-72c-39,.92-70.47,33.39-70.26,72.39a71.65,71.65,0,0,0,27.64,56.3A32,32,0,0,1,96,186v6h64v-6a32.15,32.15,0,0,1,12.47-25.35A71.65,71.65,0,0,0,200,104Zm-16.11-9.34a57.6,57.6,0,0,0-46.56-46.55,8,8,0,0,0-2.66,15.78c16.57,2.79,30.63,16.85,33.44,33.45A8,8,0,0,0,176,104a9,9,0,0,0,1.35-.11A8,8,0,0,0,183.89,94.66Z"
                />
              </svg>
            </div>
            <p class="tool-item__text">头脑风暴</p>
            <button class="tool-item__plus" @click.stop="insert('头脑风暴')">+</button>
          </div>
          <div class="tool-item" tabindex="0">
            <div class="tool-item__icon">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                fill="currentColor"
                viewBox="0 0 256 256"
              >
                <path
                  d="M216,40H136V24a8,8,0,0,0-16,0V40H40A16,16,0,0,0,24,56V176a16,16,0,0,0,16,16H79.36L57.75,219a8,8,0,0,0,12.5,10l29.59-37h56.32l29.59,37a8,8,0,1,0,12.5-10l-21.61-27H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40Zm0,136H40V56H216V176Z"
                />
              </svg>
            </div>
            <p class="tool-item__text">SWOT 分析</p>
            <button class="tool-item__plus" @click.stop="insert('SWOT 分析')">+</button>
          </div>
          <div class="tool-item" tabindex="0">
            <div class="tool-item__icon">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                fill="currentColor"
                viewBox="0 0 256 256"
              >
                <path
                  d="M140,128a12,12,0,1,1-12-12A12,12,0,0,1,140,128ZM84,116a12,12,0,1,0,12,12A12,12,0,0,0,84,116Zm88,0a12,12,0,1,0,12,12A12,12,0,0,0,172,116Zm60,12A104,104,0,0,1,79.12,219.82L45.07,231.17a16,16,0,0,1-20.24-20.24l11.35-34.05A104,104,0,1,1,232,128Zm-16,0A88,88,0,1,0,51.81,172.06a8,8,0,0,1,.66,6.54L40,216,77.4,203.53a7.85,7.85,0,0,1,2.53-.42,8,8,0,0,1,4,1.08A88,88,0,0,0,216,128Z"
                />
              </svg>
            </div>
            <p class="tool-item__text">讨论</p>
            <button class="tool-item__plus" @click.stop="insert('讨论')">+</button>
          </div>
          <div class="tool-item" tabindex="0">
            <div class="tool-item__icon">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                fill="currentColor"
                viewBox="0 0 256 256"
              >
                <path
                  d="M213.66,82.34l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40V216a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V88A8,8,0,0,0,213.66,82.34ZM160,51.31,188.69,80H160ZM200,216H56V40h88V88a8,8,0,0,0,8,8h48V216Z"
                />
              </svg>
            </div>
            <p class="tool-item__text">作业</p>
            <button class="tool-item__plus" @click.stop="insert('作业')">+</button>
          </div>
          <div class="tool-item" tabindex="0">
            <div class="tool-item__icon">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                fill="currentColor"
                viewBox="0 0 256 256"
              >
                <path
                  d="M80,224a8,8,0,0,1-8,8H56a16,16,0,0,1-16-16V184a8,8,0,0,1,16,0v32H72A8,8,0,0,1,80,224ZM216,88v48a8,8,0,0,1-16,0V96H152a8,8,0,0,1-8-8V40H120a8,8,0,0,1,0-16h32a8,8,0,0,1,5.66,2.34l56,56A8,8,0,0,1,216,88Zm-56-8h28.69L160,51.31ZM80,24H56A16,16,0,0,0,40,40V64a8,8,0,0,0,16,0V40H80a8,8,0,0,0,0-16ZM208,168a8,8,0,0,0-8,8v40h-8a8,8,0,0,0,0,16h8a16,16,0,0,0,16-16V176A8,8,0,0,0,208,168ZM48,152a8,8,0,0,0,8-8V104a8,8,0,0,0-16,0v40A8,8,0,0,0,48,152Zm104,64H112a8,8,0,0,0,0,16h40a8,8,0,0,0,0-16Z"
                />
              </svg>
            </div>
            <p class="tool-item__text">试卷</p>
            <button class="tool-item__plus" @click.stop="insert('试卷')">+</button>
          </div>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script lang="ts" setup>
import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
import Editor from '@/components/Editor.vue'
import TocTree from '@/components/TocTree.vue'
import { useToc } from '@/composables/useToc'

const editorRef = ref<InstanceType<typeof Editor> | null>(null)
const insert = (type: string) => editorRef.value?.insertCard(type)

const { nodes, activeId, init, destroy, refresh, navigateTo } = useToc()

function onEditorInput() {
  refresh()
}

onMounted(() => {
  const root = editorRef.value?.getRootEl?.()
  if (root) {
    init(root)
    // 确保初始内容完成渲染后刷新一次目录
    nextTick(() => refresh())
  }
})

onBeforeUnmount(() => destroy())

function onNavigate(id: string) {
  navigateTo(id)
}

function onInsertCardUnder(id: string) {
  const root = editorRef.value?.getRootEl?.()
  if (!root) return
  const heading = root.querySelector<HTMLElement>(`[data-toc-id="${id}"]`) || root.querySelector<HTMLElement>(`#toc-${id}`)
  if (!heading) return
  // Determine last block in this section
  const level = Number(heading.tagName.substring(1))
  const all = Array.from(root.querySelectorAll<HTMLElement>('h1, h2, h3'))
  const idx = all.indexOf(heading)
  let next: HTMLElement | null = null
  for (let i = idx + 1; i < all.length; i++) {
    const lv = Number(all[i].tagName.substring(1))
    if (lv <= level) { next = all[i]; break }
  }
  let endBlock: Element | null = null
  let cur: Element | null = heading.nextElementSibling
  while (cur && cur !== next) {
    endBlock = cur
    cur = cur.nextElementSibling
  }
  const sel = window.getSelection()
  const range = document.createRange()
  if (endBlock && endBlock instanceof HTMLElement) {
    range.selectNodeContents(endBlock)
    range.collapse(false)
  } else {
    // empty section: create spacer paragraph after heading
    const p = document.createElement('p')
    p.innerHTML = '<br />'
    heading.after(p)
    range.selectNodeContents(p)
    range.collapse(true)
  }
  sel?.removeAllRanges()
  sel?.addRange(range)
  editorRef.value?.insertCard('卡片')
}
</script>

<style lang="scss" scoped>
.app-container {
  min-height: 100vh;
  background: #fff;
  font-family:
    Inter,
    'Noto Sans',
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    Helvetica,
    Arial,
    'Apple Color Emoji',
    'Segoe UI Emoji',
    'Segoe UI Symbol',
    sans-serif;
}

.app-header {
  display: flex;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid #f0f2f5;
  padding: 12px 40px;
  background: #fff;
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;

  &__logo {
    width: 20px;
    height: 20px;
    color: #111418;
  }

  &__name {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #111418;
  }
}

.nav {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-left: 24px;
}

.nav__link {
  color: #111418;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
}

.nav__link:hover {
  color: #111418;
}

.actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

.bell-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: 40px;
  border: none;
  border-radius: 10px;
  background: #f0f2f5;
  color: #111418;
  cursor: pointer;
}

.page {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 20px 24px;
}

.layout-content-container {
  display: flex;
  flex-direction: column;
  max-width: 920px;
  flex: 1;
}

.layout-toc {
  width: 300px;
  position: sticky;
  top: 72px;
  align-self: flex-start;
  height: fit-content;
}

.layout-tools {
  width: 360px;
  display: flex;
  flex-direction: column;
}

.tools__title {
  margin: 20px 0 12px 0;
  font-size: 22px;
  font-weight: 700;
  padding: 0 16px;
}

.tool-item {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #fff;
  padding: 12px 16px;
  min-height: 56px;
  border: 1px solid transparent;
  border-radius: 10px;
  position: relative;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

.tool-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f0f2f5;
  color: #111418;
  border-radius: 10px;
  width: 40px;
  height: 40px;
}

.tool-item__text {
  font-size: 16px;
  color: #111418;
}

.tool-item:hover {
  border-color: #3d99f5;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.tool-item__plus {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: #eaf3fe;
  color: #3d99f5;
  cursor: pointer;
  opacity: 0;
  transition: opacity 200ms ease, background 150ms ease;
}
.tool-item:hover .tool-item__plus { opacity: 1; }
.tool-item__plus:hover { background: #d7e9fe; }
</style>
